<template>
  <div>
    <video class="w-100 h-100" autoplay controls ref="pptVideoRef"></video>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import Hls from 'hls.js'
const centerVedioUrl = ref(
  'https://vod-251.b.etianmu.com/2025-04-08/101500506X/1/2_hls.m3u8?timestamp=1749728641458&no=admin&sign=15a6754ea128099143020b1dddb6e90a'
)
const pptVideoRef = ref()
onMounted(() => {
  switchVideo()
})
const switchVideo = () => {
  // 中间画面路径
  const pptHls = new Hls()
  if (Hls.isSupported()) {
    pptHls.loadSource(centerVedioUrl.value)
    pptHls.attachMedia(pptVideoRef.value!)
  } else {
    console.error('HLS is not supported')
  }
}
</script>

<style lang="scss" scoped></style>
